<template>
  <view class="u-page" style="background-color: #ffffff;height: 100vh">
    <view>
      <u-row style="font-size: 20pt;font-weight: bold;margin-left: 3vw;" justify="space-between">
        <u-col span="3" style="margin-top: 15px">
          <view style="font-size: 15pt">通知</view>
        </u-col>
        <u-col span="3" style="margin-top: 15px">
          <view style="font-size: 15pt;"><a @click="toMoreNotice">更多<span> > </span></a></view>
        </u-col>
      </u-row>
      <scroll-view
          refresher-enabled
          @refresherrefresh="pullDownList"
          :refresher-triggered="triggered"
      >
      <u-row>
          <view style="height: 50vh;width: 90%;margin-left: 5vw;border-radius:5px;overflow-y: auto;">
              <u-row v-for="(item,index) in noticeList" :key="index" justify="space-between" style="margin-top: 3vh">
                  <u-col span="8"><a style="font-size: 13pt;" @click="toNoticeDetail(item)">{{item.noticeTitle}}</a></u-col>
                  <u-col span="4" style="font-size: 12pt;color: grey">{{item.createTime}}</u-col>
              </u-row>
          </view>
      </u-row>
      </scroll-view>
<!--      <u-row style="margin-top: 6vh">-->
<!--        <u-col span="5" style="margin-left: 5vw"><u-button type="primary" text="实验室安全制度" @click="sysaqzd"></u-button></u-col>-->
<!--        <u-col span="5" style="margin-left: 5vw"><u-button type="primary" text="仪器使用规定" @click="yqsygd"></u-button></u-col>-->
<!--      </u-row>-->
<!--      <u-row style="margin-top: 6vh">-->
<!--        <u-col span="5" style="margin-left: 5vw"><u-button type="primary" text="实验交流" @click="syjl"></u-button></u-col>-->
<!--        <u-col span="5" style="margin-left: 5vw"><u-button type="primary" text="创建实验" @click="createExperiment"></u-button></u-col>-->
<!--      </u-row>-->
      <u-row style="position: absolute;top: 430px">
        <u-col span="2" style="margin-left: 7vw"><u-button class="custom-button"  type="primary"  @click="handleJiaoLiuQun">我的<br/>实验</u-button></u-col>
        <u-col span="2" style="margin-left: 5vw"><u-button class="custom-button"  type="primary"  @click="sysaqzd">安全<br/>制度</u-button></u-col>
        <u-col span="2" style="margin-left: 5vw"><u-button class="custom-button"  type="primary"  @click="yqsygd">仪器<br/>使用</u-button></u-col>
        <u-col span="2" style="margin-left: 5vw"><u-button class="custom-button"  type="primary"  @click="syjl">实验<br/>交流</u-button></u-col>
      </u-row>
    </view>
<!--   点击创建实验弹出 -->
    <up-action-sheet :actions="list" :show="show" @select="selectClick" :safeAreaInsetBottom="true" :closeOnClickOverlay="true" cancelText="取消" @close="show = false"></up-action-sheet>
  </view>
</template>

<script setup>
import { getNoticList } from '@/api/system/sysIndex.js'
import { ref, onMounted } from 'vue';
//获取通知信息
const noticeList = ref([])
function getNotic(){
  getNoticList().then((response) => {
    noticeList.value = response.rows || [];
  });
}


//跳转通知详情页
function toNoticeDetail(item){
  uni.navigateTo({
    url: `/pages/laboratory/noticeDetail?noticeTitle=${item.noticeTitle}&noticeContent=${item.noticeContent}`
  });
}

//跳转更多通知
function toMoreNotice(){
  uni.navigateTo({
    url: `/pages/laboratory/moreNotice`
  });
}

//点击创建实验
const list = ref([
  {
    name: '模板创建',
  },
  {
    name: '空白计划',
  }
]);
const show = ref(false);
const selectClick = (index) => {
  if (index.name == '模板创建'){
    uni.navigateTo({
      url: `/pages/laboratory/moreTemp`
    });
  }else if (index.name == '空白计划'){
    uni.navigateTo({
      url: `/pages/laboratory/createExperiment`
    });
  }
  show.value = false
};
//创建实验
function createExperiment(){
  show.value = true
}

//实验室安全制度
function sysaqzd(){
  uni.navigateTo({
    url: `/pages/laboratory/moreAqzd`
  });
}

//仪器使用规定
function yqsygd(){
  uni.navigateTo({
    url: `/pages/laboratory/moreYqsygd`
  });
}

//实验交流
function syjl(){
  uni.navigateTo({
    url: `/pages/laboratory/syjl`
  });
}
//我的实验
function handleJiaoLiuQun() {
  uni.navigateTo({
    url: '/pages/laboratory/myLabor'
  });
};

//下拉刷新
const triggered=ref(false)
function pullDownList(){
  triggered.value = true
  getNoticList().then((response) => {
    console.log(JSON.stringify(response.rows))
    noticeList.value = response.rows || [];
    triggered.value = false
  });
}

//加载界面时触发
getNotic()
</script>

<style scoped>
.custom-button {
  white-space: pre-line; /* 保留换行符 */
  text-align: center; /* 文字居中 */
  line-height: 1.2; /* 调整行间距 */
  padding: 10px 0; /* 调整内边距 */
  box-shadow: 0 2px 4px rgba(0.5, 0.5, 0.5, 0.5); /* 默认阴影效果 */
  height: 60px;
  width: 70px;
  font-size: 13pt;
}

</style>
